<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级下拉选</title>
</head>
<body onload="getProvinces()">
<p>
    请选择省：
    <select id="provinces" onchange="getCities(this.value)">
        <option value="0">----- 请选择 -----</option>
    </select>
</p>
<p>
    请选择市：
    <select id="cities"></select>
</p>
<script type="text/javascript">
    // 简化doucment.getElementById
    function $(id) {
        return document.getElementById(id);
    }

    // 获取XMLHttpRequest
    function getXMLHttpRequest() {
        var xhr;
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else {
            xhr = new ActiveXObject("Microsoft.XMLHttp");
        }
        return xhr;
    }

    function getProvinces() {
        // 1 获取XMLHttpRequest对象
        var xhr = getXMLHttpRequest();
        // 2 设置url
        var url = "get_provinces.do";
        // 3 设置请求参数：此次操作无参数

        // 4 配置xhr的onreadystatechange属性
        xhr.onreadystatechange = function() {
            // 7 编写回调函数
            if (xhr.readyState == 4
                && xhr.status == 200) {
                // 获取数据，转换为JSON对象
                var data = JSON.parse(xhr.responseText);
                // 日志
                console.log("省列表：");
                console.log(data);
                // 生成“省”下拉菜单项
                for(var i = 0; i < data.provinces.length; i++) {
                    // 日志
                    console.log("第" + i + "次循环生成<option>");
                    // 创建<option>节点
                    var op = document.createElement("option");
                    // 配置节点属性
                    // <option value="值">显示的文字</option>
                    op.value = data.provinces[i].id;
                    op.text = data.provinces[i].name;
                    // 将节点添加到<select>中
                    $("provinces").appendChild(op);
                }
            }
        };
        // 5 调用open()函数
        xhr.open("GET", url, true);
        // 6 调用send()函数
        xhr.send();
    }

    // 获取“市”列表
    function getCities(provinceId) {
        // 清空“市”列表中的所有选项
        // $("cities").innerHTML = "";
        while ($("cities").firstChild) {
            $("cities").removeChild(
                $("cities").firstChild);
        }

        // 判断当前“省”的ID
        if (provinceId == "0") {
            // 选中了“请选择”，则无须加载“市”列表
            return;
        }

        // 1. 获取XMLHttpRequest对象
        var xhr = getXMLHttpRequest();
        // 2. 确定URL并配置请求参数
        var url = "get_cities.do?provinceId="
            + provinceId;
        // 3. 配置onreadystatechange属性
        xhr.onreadystatechange = function() {
            // 6. 编写回调函数的函数体
            if (xhr.readyState == 4
                && xhr.status == 200) {
                // 将响应正文转换为JSON对象
                var data = JSON.parse(xhr.responseText);
                // 遍布数组，生成<option>
                for (var i = 0; i < data.cities.length; i++) {
                    var op = document.createElement("option");
                    op.value = data.cities[i].id;
                    op.text = data.cities[i].name;
                    $("cities").appendChild(op);
                }
            }
        };
        // 4. 调用open()函数
        xhr.open("GET", url, true);
        // 5. 调用send()函数
        xhr.send();
    }
</script>
</body>
</html>